<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
html {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
.markmap-dark {
  background: #27272a;
  color: white;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/style.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.11.1/styles/default.min.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.12/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/index.js"></script><script>(r => {
              setTimeout(r);
            })(function renderToolbar() {
  const {
    markmap,
    mm
  } = window;
  const {
    el
  } = markmap.Toolbar.create(mm);
  el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
  document.body.append(el);
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
              const markmap = getMarkmap();
              window.mm = markmap.Markmap.create(
                "svg#mindmap",
                (getOptions || markmap.deriveOptions)(jsonOptions),
                root2
              );
              if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
                document.documentElement.classList.add("markmap-dark");
              }
            })(() => window.markmap,null,{"content":"css&#x6837;&#x5f0f;&#x8ba1;&#x7b97;","children":[{"content":"&#x6837;&#x5f0f;&#x6765;&#x6e90;","children":[{"content":"&#x4f5c;&#x8005;&#x6837;&#x5f0f;","children":[{"content":"&#x884c;&#x5185;&#x6837;&#x5f0f;&#xff08;&#x5185;&#x8054;&#x6837;&#x5f0f;&#xff09;","children":[{"content":"<pre data-lines=\"23,26\"><code class=\"language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p</span> <span class=\"hljs-attr\">style</span>=<span class=\"hljs-string\">&quot;color: red; font-size: 18px;&quot;</span>&gt;</span>&#x8fd9;&#x662f;&#x4e00;&#x4e2a;&#x7ea2;&#x8272;&#x7684;&#x6bb5;&#x843d;&#x3002;<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">p</span>&gt;</span>\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"23,26"}}],"payload":{"tag":"h4","lines":"22,23"}},{"content":"&#x5916;&#x90e8;&#x6837;&#x5f0f;&#x8868;","children":[{"content":"<pre data-lines=\"27,30\"><code class=\"language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link</span> <span class=\"hljs-attr\">rel</span>=<span class=\"hljs-string\">&quot;stylesheet&quot;</span> <span class=\"hljs-attr\">href</span>=<span class=\"hljs-string\">&quot;styles.css&quot;</span>&gt;</span>\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"27,30"}}],"payload":{"tag":"h4","lines":"26,27"}},{"content":"&#x5185;&#x90e8;&#x6837;&#x5f0f;&#x8868;","children":[{"content":"<pre data-lines=\"31,37\"><code class=\"language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style</span>&gt;</span><span class=\"language-css\">\n    <span class=\"hljs-selector-tag\">body</span> { <span class=\"hljs-attribute\">background-color</span>: <span class=\"hljs-number\">#f0f0f0</span>; }\n    <span class=\"hljs-selector-tag\">h1</span> { <span class=\"hljs-attribute\">color</span>: navy; }\n  </span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">style</span>&gt;</span>\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"31,37"}}],"payload":{"tag":"h4","lines":"30,31"}}],"payload":{"tag":"h3","lines":"20,21"}},{"content":"&#x7528;&#x6237;&#x6837;&#x5f0f;","children":[{"content":"&#x6b65;&#x9aa4; 1&#xff1a;&#x542f;&#x7528; userContent.css &#x652f;&#x6301;","children":[{"content":"<pre data-lines=\"42,51\"><code>&#x5728; Firefox &#x4e2d;&#xff0c;userContent.css &#x6587;&#x4ef6;&#x9ed8;&#x8ba4;&#x662f;&#x88ab;&#x7981;&#x7528;&#x7684;&#xff0c;&#x56e0;&#x6b64;&#x4f60;&#x9700;&#x8981;&#x901a;&#x8fc7;&#x8bbe;&#x7f6e;&#x9875;&#x9762;&#x542f;&#x7528;&#x5b83;&#xff1a;\n\n&#x5728; Firefox &#x4e2d;&#x8f93;&#x5165; about:config &#x7136;&#x540e;&#x6309; Enter&#x3002;\n\n&#x4f60;&#x4f1a;&#x770b;&#x5230;&#x4e00;&#x4e2a;&#x8b66;&#x544a;&#x9875;&#x9762;&#xff0c;&#x70b9;&#x51fb;&#x201c;&#x63a5;&#x53d7;&#x98ce;&#x9669;&#x5e76;&#x7ee7;&#x7eed;&#x201d;&#xff08;Accept the Risk and Continue&#xff09;&#x3002;\n\n&#x641c;&#x7d22; toolkit.legacyUserProfileCustomizations.stylesheets&#x3002;\n\n&#x53cc;&#x51fb;&#x8be5;&#x9009;&#x9879;&#xff0c;&#x5c06;&#x5176;&#x503c;&#x4ece; false &#x66f4;&#x6539;&#x4e3a; true&#xff0c;&#x4ee5;&#x542f;&#x7528; userContent.css &#x652f;&#x6301;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"42,51"}}],"payload":{"tag":"h4","lines":"40,41"}},{"content":"&#x6b65;&#x9aa4; 2&#xff1a;&#x627e;&#x5230; Firefox &#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x5939;","children":[{"content":"<pre data-lines=\"54,63\"><code>Firefox &#x7684;&#x7528;&#x6237;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x5939;&#x662f;&#x5b58;&#x50a8; userContent.css &#x6587;&#x4ef6;&#x7684;&#x4f4d;&#x7f6e;&#x3002;&#x4f60;&#x53ef;&#x4ee5;&#x901a;&#x8fc7;&#x4ee5;&#x4e0b;&#x6b65;&#x9aa4;&#x627e;&#x5230;&#x8be5;&#x6587;&#x4ef6;&#x5939;&#xff1a;\n\n&#x6253;&#x5f00; Firefox&#x3002;\n\n&#x5728;&#x5730;&#x5740;&#x680f;&#x8f93;&#x5165; about:support &#x5e76;&#x6309;&#x56de;&#x8f66;&#x3002;\n\n&#x5728;&#x201c;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x57fa;&#x672c;&#x4fe1;&#x606f;&#x201d;&#x9875;&#x9762;&#x4e2d;&#xff0c;&#x627e;&#x5230; Profile Folder&#xff08;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x6587;&#x4ef6;&#x5939;&#xff09;&#x3002;\n\n&#x70b9;&#x51fb;&#x201c;&#x6253;&#x5f00;&#x6587;&#x4ef6;&#x5939;&#x201d;&#xff08;Open Folder&#xff09;&#x3002;&#x8fd9;&#x4f1a;&#x6253;&#x5f00;&#x4f60;&#x7684; Firefox &#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x5939;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"54,63"}}],"payload":{"tag":"h4","lines":"52,53"}},{"content":"&#x6b65;&#x9aa4; 3&#xff1a;&#x521b;&#x5efa; chrome &#x6587;&#x4ef6;&#x5939;&#xff08;&#x5982;&#x679c;&#x4e0d;&#x5b58;&#x5728;&#xff09;","children":[{"content":"<pre data-lines=\"66,69\"><code>&#x5728;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x5939;&#x4e2d;&#xff0c;&#x68c0;&#x67e5;&#x662f;&#x5426;&#x5df2;&#x7ecf;&#x6709;&#x4e00;&#x4e2a;&#x540d;&#x4e3a; chrome &#x7684;&#x6587;&#x4ef6;&#x5939;&#x3002;&#x5982;&#x679c;&#x6ca1;&#x6709;&#xff0c;&#x624b;&#x52a8;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x6587;&#x4ef6;&#x5939;&#xff0c;&#x547d;&#x540d;&#x4e3a; chrome&#x3002;\n\n&#x8fdb;&#x5165; chrome &#x6587;&#x4ef6;&#x5939;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"66,69"}}],"payload":{"tag":"h4","lines":"64,65"}},{"content":"&#x6b65;&#x9aa4; 4&#xff1a;&#x521b;&#x5efa; userContent.css &#x6587;&#x4ef6;","children":[{"content":"<pre data-lines=\"72,75\"><code>&#x5728; chrome &#x6587;&#x4ef6;&#x5939;&#x4e2d;&#xff0c;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x540d;&#x4e3a; userContent.css &#x7684;&#x6587;&#x4ef6;&#x3002;&#x53ef;&#x4ee5;&#x4f7f;&#x7528;&#x4efb;&#x4f55;&#x6587;&#x672c;&#x7f16;&#x8f91;&#x5668;&#xff08;&#x5982; Notepad &#x6216; Sublime Text&#xff09;&#x6765;&#x521b;&#x5efa;&#x8be5;&#x6587;&#x4ef6;&#x3002;\n\n&#x6253;&#x5f00; userContent.css &#x6587;&#x4ef6;&#xff0c;&#x5e76;&#x6dfb;&#x52a0;&#x4f60;&#x60f3;&#x8981;&#x5e94;&#x7528;&#x7684; CSS &#x6837;&#x5f0f;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"72,75"}}],"payload":{"tag":"h4","lines":"70,71"}}],"payload":{"tag":"h3","lines":"37,38"}},{"content":"&#x6d4f;&#x89c8;&#x5668;&#x9ed8;&#x8ba4;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"h3","lines":"76,77"}},{"content":"&#x7ee7;&#x627f;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"h3","lines":"78,79"}},{"content":"&#x521d;&#x59cb;&#x503c;","children":[],"payload":{"tag":"h3","lines":"81,82"}}],"payload":{"tag":"h2","lines":"18,19"}},{"content":"1. &#x6536;&#x96c6;&#x6837;&#x5f0f;","children":[{"content":"1. &#x4f5c;&#x8005;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"86,87","listIndex":1}},{"content":"2. &#x7528;&#x6237;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"87,88","listIndex":2}},{"content":"3. &#x6d4f;&#x89c8;&#x5668;&#x9ed8;&#x8ba4;&#x6837;&#x5f0f;","children":[],"payload":{"tag":"li","lines":"88,90","listIndex":3}}],"payload":{"tag":"h2","lines":"84,85"}},{"content":"2. &#x89e3;&#x51b3;&#x5c42;&#x53e0;&#x51b2;&#x7a81;","children":[{"content":"1.&#x6bd4;&#x8f83; !important","children":[{"content":"<pre data-lines=\"93,95\"><code>  &#x6709;important&#x7684;&#x80dc;&#x51fa;&#xff0c;&#x82e5;important&#x76f8;&#x540c;&#xff0c;&#x8fdb;&#x5165;&#x4e0b;&#x4e00;&#x6b65;&#x6bd4;&#x8f83;\n  &#xff08;&#x7528;&#x6237;&#x6837;&#x5f0f;&#x8868;&#x52a0;&#x4e86; important &#x4f18;&#x5148;&#x7ea7;&#x9ad8;&#x4e8e;&#x4f5c;&#x8005;&#x6837;&#x5f0f;&#x8868;&#x52a0;&#x4e86; important&#xff09;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"93,95"}}],"payload":{"tag":"h3","lines":"92,93"}},{"content":"2.&#x6bd4;&#x8f83;&#x6765;&#x6e90;","children":[{"content":"<pre data-lines=\"96,103\"><code>  CSS&#x53ef;&#x4ee5;&#x6765;&#x81ea;&#x4e0d;&#x540c;&#x7684;&#x6765;&#x6e90;&#x3002;&#x5b83;&#x4eec;&#x7684;&#x4f18;&#x5148;&#x7ea7;&#x4ece;&#x4f4e;&#x5230;&#x9ad8;&#x5982;&#x4e0b;&#xff1a;\n  &#x7528;&#x6237;&#x4ee3;&#x7406;&#x6837;&#x5f0f;&#xff08;User-agent styles&#xff09;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x7f6e;&#x7684;&#x9ed8;&#x8ba4;&#x6837;&#x5f0f;&#xff08;&#x5982; `&lt;h1&gt;` &#x7684;&#x9ed8;&#x8ba4;&#x5927;&#x5c0f;&#x3001;&#x8fb9;&#x8ddd;&#xff09;&#x3002;\n  &#x7528;&#x6237;&#x6837;&#x5f0f;&#xff08;User styles&#xff09;&#xff1a;&#x7528;&#x6237;&#x901a;&#x8fc7;&#x6d4f;&#x89c8;&#x5668;&#x8bbe;&#x7f6e;&#x7684;&#x81ea;&#x5b9a;&#x4e49;&#x6837;&#x5f0f;&#xff08;&#x73b0;&#x5728;&#x8f83;&#x5c11;&#x89c1;&#xff09;&#x3002;\n  &#x4f5c;&#x8005;&#x6837;&#x5f0f;&#xff08;Author styles&#xff09;&#xff1a;&#x7531;&#x7f51;&#x9875;&#x5f00;&#x53d1;&#x8005;&#x7f16;&#x5199;&#x7684;CSS&#xff08;&#x6211;&#x4eec;&#x5199;&#x7684;CSS&#x6587;&#x4ef6;&#x3001;`&lt;style&gt;`&#x6807;&#x7b7e;&#xff09;&#x3002;\n  &#x8fc7;&#x6e21;&#x6837;&#x5f0f;&#xff08;Transition styles&#xff09;&#xff1a; CSS&#x8fc7;&#x6e21;&#x671f;&#x95f4;&#x751f;&#x6210;&#x7684;&#x58f0;&#x660e;&#xff0c;&#x4f18;&#x5148;&#x7ea7;&#x6700;&#x9ad8;&#xff0c;&#x4f46;&#x4ec5;&#x9002;&#x7528;&#x4e8e;&#x7279;&#x5b9a;&#x5c5e;&#x6027;&#x3002;\n  !important &#x4f1a;&#x53cd;&#x8f6c;&#x8fd9;&#x4e2a;&#x987a;&#x5e8f;&#xff1a;\n  &#x666e;&#x901a;&#x58f0;&#x660e;&#xff1a;&#x4f5c;&#x8005; &gt; &#x7528;&#x6237; &gt; &#x7528;&#x6237;&#x4ee3;&#x7406;!important &#x58f0;&#x660e;&#xff1a;&#x7528;&#x6237;&#x4ee3;&#x7406; &gt; &#x7528;&#x6237; &gt; &#x4f5c;&#x8005;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"96,103"}}],"payload":{"tag":"h3","lines":"95,96"}},{"content":"3.&#x6bd4;&#x8f83;&#x7279;&#x5f02;&#x6027;&#xff08;Specificity&#xff09;","children":[{"content":"<pre data-lines=\"104,117\"><code>  &#x5185;&#x8054;&#x6837;&#x5f0f;&#xff08;Inline styles&#xff09;&#xff1a;style=&quot;color: red;&quot;&#x3002;&#x7279;&#x5f02;&#x6027;&#x4e3a; (1, 0, 0, 0)&#x3002;&#x5b83;&#x6ca1;&#x6709;&#x9009;&#x62e9;&#x5668;&#xff0c;&#x4f46;&#x4f18;&#x5148;&#x7ea7;&#x6781;&#x9ad8;&#x3002;\n  ID &#x9009;&#x62e9;&#x5668;&#xff08;ID selectors&#xff09;&#xff1a;#header&#x3002;&#x6bcf;&#x4e2a;ID&#x9009;&#x62e9;&#x5668;&#x52a0; (0, 1, 0, 0)&#x3002;\n  &#x7c7b;&#x3001;&#x5c5e;&#x6027;&#x3001;&#x4f2a;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#xff08;Class, attribute, pseudo-class selectors&#xff09;&#xff1a;&#x6bcf;&#x4e2a;&#x6b64;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#x52a0; (0, 0, 1, 0)&#x3002;\n  &#x5143;&#x7d20;&#x3001;&#x4f2a;&#x5143;&#x7d20;&#x9009;&#x62e9;&#x5668;&#xff1a;&#x6bcf;&#x4e2a;&#x6b64;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#x52a0; (0, 0, 0, 1)&#x3002;\n  &#x5982;&#x4f55;&#x6bd4;&#x8f83;&#xff1f;\n  &#x4ece;&#x5de6;&#x5230;&#x53f3;&#x9010;&#x4f4d;&#x6bd4;&#x8f83;&#x3002;&#x5148;&#x6bd4;&#x8f83;&#x7b2c;&#x4e00;&#x4f4d;&#xff08;&#x5185;&#x8054;&#x6837;&#x5f0f;&#xff09;&#xff0c;&#x6570;&#x503c;&#x5927;&#x7684;&#x8d62;&#x3002;\n  &#x5982;&#x679c;&#x76f8;&#x540c;&#xff0c;&#x518d;&#x6bd4;&#x8f83;&#x7b2c;&#x4e8c;&#x4f4d;&#xff08;ID&#x6570;&#x91cf;&#xff09;&#xff0c;&#x4ee5;&#x6b64;&#x7c7b;&#x63a8;&#x3002;\n  &#x901a;&#x7528;&#x9009;&#x62e9;&#x5668;&#xff08;*&#xff09;&#x3001;&#x7ec4;&#x5408;&#x7b26;&#xff08;+, &gt;, ~&#xff09;&#x3001;:where() &#x7684;&#x7279;&#x5f02;&#x6027;&#x4e3a; 0&#x3002;\n  not(), :is() &#x4f2a;&#x7c7b; &#x7684;&#x7279;&#x5f02;&#x6027;&#x7531;&#x5176;&#x5185;&#x90e8;&#x53c2;&#x6570;&#x5217;&#x8868;&#x4e2d;&#x6700;&#x7279;&#x5f02;&#x7684;&#x90a3;&#x4e2a;&#x9009;&#x62e9;&#x5668;&#x51b3;&#x5b9a;&#x3002;\n  &#x793a;&#x4f8b;&#xff1a;\n  #nav .list-item a:hover &#x2192; 1&#x4e2a;ID(#nav), 2&#x4e2a;&#x7c7b;(.list-item, :hover), 1&#x4e2a;&#x5143;&#x7d20;(a) &#x2192; &#x7279;&#x5f02;&#x6027;: (0,1,2,1)\n  body header#home .logo &#x2192; 1&#x4e2a;ID(#home), 1&#x4e2a;&#x7c7b;(.logo), 2&#x4e2a;&#x5143;&#x7d20;(body, header) &#x2192; &#x7279;&#x5f02;&#x6027;: (0,1,1,2)\n  &#x6bd4;&#x8f83;&#xff1a;(0,1,2,1) &gt; (0,1,1,2)&#xff0c;&#x56e0;&#x4e3a;&#x7b2c;&#x4e8c;&#x4f4d;&#x76f8;&#x540c;&#xff08;&#x90fd;&#x662f;1&#xff09;&#xff0c;&#x4f46;&#x7b2c;&#x4e09;&#x4f4d;&#x524d;&#x8005;&#x662f;2&#xff0c;&#x540e;&#x8005;&#x662f;1&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"104,117"}}],"payload":{"tag":"h3","lines":"103,104"}},{"content":"4.&#x6e90;&#x7801;&#x987a;&#x5e8f;","children":[{"content":"<pre data-lines=\"118,120\"><code>`&lt;link&gt;`&#x5f15;&#x5165;&#x7684;&#x6837;&#x5f0f;&#x8868;&#x548c; `&lt;style&gt;` &#x6807;&#x7b7e;&#x7684;&#x987a;&#x5e8f;&#x4e5f;&#x5f88;&#x91cd;&#x8981;&#x3002;&#x540e;&#x52a0;&#x8f7d;&#x7684;&#x6837;&#x5f0f;&#x8868;&#x4e2d;&#x7684;&#x58f0;&#x660e;&#x4f18;&#x5148;&#x7ea7;&#x66f4;&#x9ad8;&#x3002;\n&#x8c37;&#x6b4c;&#x63d2;&#x4ef6;stylus &#x5176;&#x5b9e;&#x662f;&#x901a;&#x8fc7;&#x63d2;&#x5165;`&lt;style&gt;`&#x6765;&#x751f;&#x6548;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"118,120"}}],"payload":{"tag":"h3","lines":"117,118"}}],"payload":{"tag":"h2","lines":"90,91"}},{"content":"3. &#x7ee7;&#x627f;","children":[{"content":"1.&#x7b5b;&#x9009;&#x672a;&#x58f0;&#x660e;&#x5c5e;&#x6027;","children":[{"content":"<pre data-lines=\"129,130\"><code>  &#x904d;&#x5386;&#x5f53;&#x524d;&#x5143;&#x7d20;&#x7684;&#x6240;&#x6709;CSS&#x5c5e;&#x6027;&#xff0c;&#x6807;&#x8bb0;&#x672a;&#x88ab;&#x5c42;&#x53e0;&#x51b2;&#x7a81;&#x8986;&#x76d6;&#x7684;&#x5c5e;&#x6027;&#xff08;&#x5373;&#x65e0;&#x58f0;&#x660e;&#x503c;&#x7684;&#x5c5e;&#x6027;&#xff09;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"129,130"}}],"payload":{"tag":"h3","lines":"127,128"}},{"content":"2.&#x68c0;&#x67e5;&#x5c5e;&#x6027;&#x662f;&#x5426;&#x53ef;&#x7ee7;&#x627f;","children":[{"content":"<pre data-lines=\"133,135\"><code>  &#x82e5;&#x5c5e;&#x6027;&#x4e0d;&#x53ef;&#x7ee7;&#x627f;&#xff08;&#x5982;width&#xff09;&#xff0c;&#x5219;&#x8df3;&#x8fc7;&#x7ee7;&#x627f;&#xff0c;&#x76f4;&#x63a5;&#x4f7f;&#x7528;&#x9ed8;&#x8ba4;&#x503c;&#xff08;&#x89c1;&#x4e0b;&#x6587;&#x201c;&#x9ed8;&#x8ba4;&#x503c;&#x5904;&#x7406;&#x201d;&#xff09;&#x3002;\n  &#x82e5;&#x5c5e;&#x6027;&#x53ef;&#x7ee7;&#x627f;&#xff08;&#x5982;color&#xff09;&#xff0c;&#x5219;&#x8fdb;&#x5165;&#x6b65;&#x9aa4;3&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"133,135"}}],"payload":{"tag":"h3","lines":"131,132"}},{"content":"3.&#x4ece;&#x7236;&#x5143;&#x7d20;&#x83b7;&#x53d6;&#x8ba1;&#x7b97;&#x503c;","children":[{"content":"<pre data-lines=\"138,141\"><code>  &#x5173;&#x952e;&#x70b9;&#xff1a;&#x7ee7;&#x627f;&#x7684;&#x662f;&#x7236;&#x5143;&#x7d20;&#x7684;&#x8ba1;&#x7b97;&#x503c;&#xff08;Computed Value&#xff09;&#xff0c;&#x800c;&#x975e;&#x58f0;&#x660e;&#x503c;&#x3002;\n      &#x8ba1;&#x7b97;&#x503c;&#xff1a;&#x58f0;&#x660e;&#x503c;&#x7ecf;&#x8fc7;&#x5355;&#x4f4d;&#x8f6c;&#x6362;&#x3001;&#x76f8;&#x5bf9;&#x503c;&#x8ba1;&#x7b97;&#x540e;&#x7684;&#x7ed3;&#x679c;&#xff08;&#x5982;font-size: 1.2em &#x2192; &#x8ba1;&#x7b97;&#x4e3a;19.2px&#xff09;&#x3002;\n  &#x9012;&#x5f52;&#x67e5;&#x627e;&#xff1a;&#x82e5;&#x7236;&#x5143;&#x7d20;&#x4e5f;&#x672a;&#x58f0;&#x660e;&#x8be5;&#x5c5e;&#x6027;&#xff0c;&#x5219;&#x7ee7;&#x7eed;&#x5411;&#x4e0a;&#x67e5;&#x627e;&#x7956;&#x5148;&#x5143;&#x7d20;&#xff0c;&#x76f4;&#x5230;&#x6839;&#x5143;&#x7d20;&#xff08;&lt;html&gt;&#xff09;&#x3002;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"138,141"}}],"payload":{"tag":"h3","lines":"136,137"}},{"content":"4.&#x5e94;&#x7528;&#x7ee7;&#x627f;&#x503c;","children":[{"content":"<pre data-lines=\"144,151\"><code>  &#x5c06;&#x7ee7;&#x627f;&#x7684;&#x8ba1;&#x7b97;&#x503c;&#x8bbe;&#x4e3a;&#x5f53;&#x524d;&#x5143;&#x7d20;&#x7684;&#x4e34;&#x65f6;&#x8ba1;&#x7b97;&#x503c;&#xff0c;&#x8fdb;&#x5165;&#x4e0b;&#x4e00;&#x6b65;&#x201c;&#x9ed8;&#x8ba4;&#x503c;&#x5904;&#x7406;&#x201d;&#x3002;\n  inherit&#x5173;&#x952e;&#x5b57;\n    &#x5f3a;&#x5236;&#x7ee7;&#x627f;&#x7236;&#x5143;&#x7d20;&#x8ba1;&#x7b97;&#x503c;&#xff0c;&#x5ffd;&#x7565;&#x5c42;&#x53e0;&#x51b2;&#x7a81;&#xff08;&#x5373;&#x4f7f;&#x6709;&#x66f4;&#x9ad8;&#x4f18;&#x5148;&#x7ea7;&#x58f0;&#x660e;&#xff09;&#x3002;\n    &#x793a;&#x4f8b;&#xff1a;h1 { color: inherit; } &#x4f1a;&#x8986;&#x76d6;&#x6240;&#x6709;&#x5c42;&#x53e0;&#x89c4;&#x5219;&#x3002;\n\n  &#x4e0d;&#x53ef;&#x7ee7;&#x627f;&#x5c5e;&#x6027;&#x7684;&#x5f3a;&#x5236;&#x7ee7;&#x627f;\n      &#x82e5;&#x9700;&#x8ba9;&#x4e0d;&#x53ef;&#x7ee7;&#x627f;&#x5c5e;&#x6027;&#xff08;&#x5982;border&#xff09;&#x7ee7;&#x627f;&#xff0c;&#x9700;&#x663e;&#x5f0f;&#x8bbe;&#x7f6e;\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"144,151"}}],"payload":{"tag":"h3","lines":"142,143"}}],"payload":{"tag":"h2","lines":"123,124"}},{"content":"4. &#x521d;&#x59cb;&#x503c;","children":[{"content":"&#x82e5;&#x5c5e;&#x6027;&#x65e2;&#x672a;&#x88ab;&#x58f0;&#x660e;&#xff0c;&#x4e5f;&#x4e0d;&#x53ef;&#x7ee7;&#x627f;&#x6216;&#x65e0;&#x7956;&#x5148;&#x5143;&#x7d20;&#x53ef;&#x7ee7;&#x627f;&#xff0c;&#x5219;&#x4f7f;&#x7528;&#x521d;&#x59cb;&#x503c;&#xff08;Initial Value&#xff09;","children":[],"payload":{"tag":"h3","lines":"154,155"}}],"payload":{"tag":"h2","lines":"152,153"}},{"content":"css&#x503c;&#x7c7b;&#x578b;","children":[{"content":"<table data-lines=\"158,164\">\n<thead data-lines=\"158,159\">\n<tr data-lines=\"158,159\">\n<th>&#x503c;&#x7c7b;&#x578b;</th>\n<th>&#x751f;&#x6210;&#x9636;&#x6bb5;</th>\n<th>&#x7279;&#x70b9;</th>\n<th>&#x793a;&#x4f8b;</th>\n</tr>\n</thead>\n<tbody data-lines=\"160,164\">\n<tr data-lines=\"160,161\">\n<td>&#x58f0;&#x660e;&#x503c;</td>\n<td>-</td>\n<td>&#x539f;&#x59cb;CSS&#x58f0;&#x660e;&#x503c;</td>\n<td>-</td>\n</tr>\n<tr data-lines=\"161,162\">\n<td>&#x8ba1;&#x7b97;&#x503c;</td>\n<td>&#x7ee7;&#x627f;&#x524d;</td>\n<td>&#x76f8;&#x5bf9;&#x503c;&#x2192;&#x7edd;&#x5bf9;&#x503c;&#xff0c;&#x89c4;&#x8303;&#x5316;&#x5173;&#x952e;&#x5b57;&#xff0c;&#x7528;&#x4e8e;&#x7ee7;&#x627f;</td>\n<td>1.2em &#x2192; 19.2px</td>\n</tr>\n<tr data-lines=\"162,163\">\n<td>&#x4f7f;&#x7528;&#x503c;</td>\n<td>&#x5e03;&#x5c40;&#xff08;Layout&#xff09;&#x9636;&#x6bb5;</td>\n<td>&#x8003;&#x8651;&#x5e03;&#x5c40;&#x7ea6;&#x675f;&#xff08;&#x5982;min-width&#x3001;max-width&#xff09;&#xff0c;&#x7528;&#x4e8e;&#x6e32;&#x67d3;</td>\n<td>width: 50% &#x2192; 300px&#xff08;&#x53d7;&#x7236;&#x5143;&#x7d20;&#x9650;&#x5236;&#xff09;</td>\n</tr>\n<tr data-lines=\"163,164\">\n<td>&#x5b9e;&#x9645;&#x503c;</td>\n<td>&#x6e32;&#x67d3;&#x540e;</td>\n<td>&#x6700;&#x7ec8;&#x5c4f;&#x5e55;&#x663e;&#x793a;&#x503c;&#xff08;&#x53d7;&#x8bbe;&#x5907;&#x50cf;&#x7d20;&#x6bd4;&#x3001;&#x5b50;&#x50cf;&#x7d20;&#x6e32;&#x67d3;&#x5f71;&#x54cd;&#xff09;</td>\n<td>19.2px &#x2192; 19px&#xff08;&#x6574;&#x6570;&#x50cf;&#x7d20;&#xff09;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"158,164"}}],"payload":{"tag":"h2","lines":"156,157"}}],"payload":{"tag":"h1","lines":"0,1"}},{})</script>
</body>
</html>
